<template>
    <div class="page_container">
        <div class="tabbar_page_container">
            <Main v-show="active == 1"></Main>
            <Home v-show="active == 2"></Home>
        </div>
        <Tabbar :active="active" @tabChange="handleTabChange" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Main from '@/component/tabbar/Main.vue';
import Home from '@/component/tabbar/Home.vue';
import Tabbar from '@/component/tabbar/Tabbar.vue';

// 控制显示的页面
let active = ref(1);

// 处理 tab 切换
const handleTabChange = (newActive) => {
    active.value = newActive;
};
</script>

<style scoped lang="less">
.tabbar_page_container > div {
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    padding: 3vw;
    padding-bottom: 20vw;
    background-image: var(--page-bg-color);
}
</style>
